<template>
    <div class="carGate">
        

       <div class="searchResult">
                <van-empty description="未查询到车辆备案信息" v-if="nodata"/>


                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="!nodata">
        
                    <div class="searchSummary asynDate" v-if="asynDate" style="margin-bottom: 0;">
                        数据更新日期：{{ asynDate }}<br/>
                        <span class="asynDateDesc">按车辆入校时间排序</span>
                    </div>

                    <van-list
                        class="carInfoList" 
                        v-model:loading="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                  
                    >
                        <ColorItem color="#FFA000" class="searchItem" :colorBorder="false" v-for="cardInfo in carInfoList">
                            <CarInfoItem :value="cardInfo" link/>
                        </ColorItem>
                    </van-list>
                </van-pull-refresh>
   
            </div>        
    </div>
    <van-popup v-model:show="showDetail" closeable position="bottom" :style="{ height: '70%' }" teleport="body" round>
        <div class="carInLog">
            <div class="detailTitle">车辆进出校记录</div>         
            <CarLogList :plate-no="plateNo"/>   
        </div>
    </van-popup>
</template>
<script lang="ts" setup>
import CarInfoItem from '@/components/carInfo.vue';
import ColorItem from '@/components/ColorItem.vue';
import http from '@/api/request'
import { onActivated, onMounted, ref, watch } from 'vue';
import { type CarQueryResult, type CarInfo } from '@/types/common';
import CarLogList from '@/views/car/carLogList.vue';

const props = defineProps({
    staffId:String
})
const showDetail = ref(false)
const nodata = ref(false);
const key = ref('')
const carInfoList = ref<CarInfo[]>([]);
const asynDate = ref('')
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false);
const plateNo = ref()
var pageNo = 1;

const showLogs = (c:CarInfo)=>{
    showDetail.value = true;
    plateNo.value = c.CPH
}

onMounted(()=>{
    pageNo = 1;
    getList();
})

onActivated(()=>{
    window.scroll(0,0)
})

watch(()=>props.staffId,()=>{        
    pageNo = 1;
    getList();
});

const getList = ()=>{
    http.get<CarQueryResult>('/query/queryCarByStaffId/',{
        key:props.staffId,
        pageNo
    }).then((resp)=>{
        loading.value = false;
        refreshing.value = false;
        nodata.value = false;
        finished.value = true;

        if(pageNo ==1) carInfoList.value=[];

        var result = resp.data?.carInfoList;
        if(result && result.length > 0){
            nodata.value = false;
            carInfoList.value = carInfoList.value.concat( result);
        }else{
            if(pageNo == 1)nodata.value = true;
            
        }
        
        if(resp.data?.asynDate)asynDate.value = resp.data?.asynDate
    })
}


const onRefresh = ()=>{
    pageNo = 1;
    finished.value=false;
    getList();
}

</script>

<style lang="less" scoped>
.carGate{

    min-height: 100vh;
    

  
    .searchPart{        
        margin-top: 60px;
        background-color: #fff;        
        
        padding:10px;
        
        .search{
            margin-top: 10px;
        }
    }

    .searchResult{
        

        .sectionTitleWrapper{
            margin-top: 2px;
            background-color: #fff;
            padding: 10px;
        }

        .searchResultList{
        
            
        }

        .subSection{
            line-height: 30px;
        }

        .carInfoList{
            padding:10px;
            .searchItem{
                margin-bottom: 10px;
                background-color: #fff;
            }
        }
    }
    
   
    .searchSummary{
        font-size: 14px;
        padding:10px;
        padding-bottom: 0;
        text-align: center;
        margin-top:10px;
    }
}

.carInLog{
    .detailTitle{
        text-align: center;
        line-height: 40px;
        font-size: 18px;
    }
}

</style>

<style>
:root {
  --role-teacher: #1976D2;    /* 教职工蓝 */
  --role-student: #388E3C;    /* 学生绿 */
  --role-visitor: #F57C00;    /* 访客橙 */ 
  --role-stranger: #D32F2F;   /* 未登记红 */
}
</style>